// 一、BOM与DOM的关系：BOM里面包含DOM
// 二、DOM:浏览器文档对象模型，就是把整个网页当做一个对象，主要就是操作网页中的内容（增、删、改、查）
// 三、节点：就是组成网页的内容，每一个节点都是一个对象
// 四、DOM操作依赖浏览器，离开浏览器，节点就不存在，因此必须在浏览器中执行js代码
// 五、节点分类：
// 1.元素节点：每一个html元素都可以是一个节点对象
// 2.属性节点：html起始标签里面的每一个属性都是一个节点对象
// 3.文本节点：文本内容也可以是一个节点对象


// 六、获取节点的方法（1+6+4）
// （一）旧的DOM获取节点方法
// 1.document.body:返回body元素节点对象本身
// let a=document.body
// console.log(a);
// console.log(typeof a);//object

// 2.document.images:获取页面中所有的img图片的节点；
// 返回值是一个伪数组对象，把所有的图片节点对象存放在这个伪数组对象中
// 如果要访问其中某一个节点对象，需要使用中括号访问法进行访问
// let b=document.images;
// console.log(b);
// console.log(b[1]);

// 3.document.links:获取页面中所有带有href属性的a元素和area元素节点；
// 返回值是一个伪数组对象，把获取到的所有节点对象存放在这个伪数组对象中
// 如果要访问其中某一个节点对象，需要使用中括号访问法进行访问
// let c=document.links;
// console.log(c);

// 4.document.anchors:获取页面中所有具有name属性的a元素节点；
// 返回值是一个伪数组对象，把获取到的所有节点对象存放在这个伪数组对象中
// 如果要访问其中某一个节点对象，需要使用中括号访问法进行访问
// let d=document.anchors;
// console.log(d);

// 5.document.forms:获取页面中所有的form元素节点；
// 返回值是一个伪数组对象，把获取到的所有节点对象存放在这个伪数组对象中
// 如果要访问其中某一个节点对象，需要使用中括号访问法进行访问
// let e=document.forms;
// console.log(e);

// （二）新的DOM获取节点方法(快速获取节点)
// 1.document.getElementById:获取页面中唯一ID名所在的元素节点
// 返回值是元素节点对象本身
// let f=document.getElementById("box");
// console.log(f);

// 2.document.getElementsByClassName:获取页面中所有类名相同的元素节点；
// 返回值是一个伪数组对象，把获取到的所有节点对象存放在这个伪数组对象中
// 如果要访问其中某一个节点对象，需要使用中括号访问法进行访问
// let g=document.getElementsByClassName("test");
// console.log(g);

// 3.document.getElementsByTagName:获取页面中所有名字相同的元素节点；
// 返回值是一个伪数组对象，把获取到的所有节点对象存放在这个伪数组对象中
// 如果要访问其中某一个节点对象，需要使用中括号访问法进行访问
// let h=document.getElementsByTagName("a");
// console.log(h);

// 4.document.getElementsByName:获取页面中所有name属性值相同的元素节点
// 返回值是一个伪数组对象，把获取到的所有节点对象存放在这个伪数组对象中
// 如果要访问其中某一个节点对象，需要使用中括号访问法进行访问
// let j=document.getElementsByName("qwe");
// console.log(j);

// 5.document.querySelector:通过CSS选择器的语法来获取页面中符合条件的第一个元素节点；
// 返回值是元素节点本身
// let k=document.querySelector("div .test");
// console.log(k);

// CSS选择器：
// 元素选择器：div 
// 类选择器：.test
// ID选择器：#box
// 选择器组合：div p;div>p;div,p;div+p;div~p;div:nth-of-type(2);div:nth-of-child(2)

// 6.document.querySelectorAll:通过CSS选择器的语法来获取页面中符合条件的所有元素节点；
// 返回值是一个伪数组对象，把获取到的所有节点对象存放在这个伪数组对象中
// 如果要访问其中某一个节点对象，需要使用中括号访问法进行访问
// let l=document.querySelectorAll("div .test");
// console.log(l);


// 总结：确定页面中永远只会有一个该元素对象的，就返回元素节点对象本身；页面中可能会有多个的元素节点，就返回伪数字对象

// （三）通过关系获取节点方法
// 1.通过父子关系获取节点
// （1）已经获取了父元素节点，然后通过父元素节点获取子元素节点
// let ul=document.getElementsByTagName("ul");
// console.log(ul[0].children);//返回值是伪数组对象

// （2）已经获取了子元素节点，然后通过子元素节点获取父元素节点
// let li=document.getElementsByTagName("li");
// console.log(li[0].parentNode);//返回值是父元素节点对象本身

// 2.通过兄弟关系获取节点
// let p=document.getElementsByClassName("xyz")[0];
// （1）获取前一个兄弟元素节点
// console.log(p.previousElementSibling);//返回值是前一个兄弟元素节点对象本身
// （2）获取前一后兄弟元素节点
// console.log(p.nextElementSibling);//返回值是后一个兄弟元素节点对象本身

// 注意：没有前一个或者后一个兄弟元素就会返回null


// 七、增加节点
// 1.创建一个元素节点
// let newP=document.createElement("p");
// // 2.创建一个文本节点
// let text=document.createTextNode("hello world!");
// // 3.把文件节点放入到元素节点中
// // 语法：父节点.appendChild(子节点)
// newP.appendChild(text);
// // 4.把组合好的元素节点插入到页面中
// // let father=document.body;
// let max=document.getElementsByClassName("max")[0];
// max.appendChild(newP);

// // 父节点.insertBefore(新增子节点，原本子节点)；
// document.body.insertBefore(newP,max);

// 总结：把元素插入到页面中
// 1. 把元素插入到某个元素里面：
//  父节点.appendChild(子节点)
// 2.把元素插入到某个元素前面
// 父节点.insertBefore(新增子节点，原本子节点)


// 八、删除节点
// 1.元素节点.remove():谁调用remove方法，就删除该元素节点
// let max=document.getElementsByClassName("max")[0];
// max.remove();

// 2.父元素节点.removeChild(子元素节点)：删掉子元素节点
// let max=document.getElementsByClassName("max")[0];
// let h1=document.querySelector(".max h1");
// max.removeChild(h1);


// 九、替换节点
// 语法：父节点.replaceChild（新节点，旧节点）
// 1.新建元素节点
// let newH2=document.createElement("h2");
// // 2.新建文件节点
// let text=document.createTextNode("2222222222222");
// // 3.把文本节点插入到元素节点中
// newH2.appendChild(text);
// // 4.替换元素节点
// let xyz=document.getElementsByClassName("xyz")[0];
// document.body.replaceChild(newH2,xyz);

// 十、克隆节点（复制节点）
// 先获取要克隆的节点，再选择深克隆还是浅克隆,最后再插入页面中
// let ul=document.getElementsByTagName("ul")[0];
// 1.浅克隆:只克隆元素节点本身，不包含元素节点里面的内容；参数是false
// let newUL=ul.cloneNode(false);
// document.body.appendChild(newUL);

// 2.深克隆:不只克隆节点本身，还会包含节点里面所有的内容；参数是true
// let newUL2=ul.cloneNode(true);
// document.body.appendChild(newUL2);


// // 十一、批量向页面中添加节点
// let arr=["唐僧","悟空","八戒","沙僧","白龙马","白骨精","黑熊精"];
// let ol=document.getElementById("list");
// let list=document.createDocumentFragment();//创建文档碎片
// for(let i=0;i<arr.length;i++){
//     // 1.创建元素节点
//     let newLi=document.createElement("li");
//     // 2.创建文本元素
//     let text=document.createTextNode(arr[i]);
//     // 3.把文本节点插入到元素节点中
//     newLi.appendChild(text);
//     // 4.把新增的节点插入到文档碎片中
//     list.appendChild(newLi);
//     // 注意：每一次执行appendChild方法向页面中插入元素，就会刷新一次页面
// }

// ol.appendChild(list);//把文档碎片里面的内容一次性插入到页面中，页面就只会刷新一次


// 十二、实时集合
// let li=document.getElementsByTagName("li");
// console.log(li);
// li[0].remove();
// console.log(li);


// let li=document.querySelectorAll("li");
// console.log(li);
// li[0].remove();
// console.log(li);

// 总结：使用get类方法获取的节点列表是实时集合，会根据当前的页面情况实时更新列表内容和长度
//      使用querySelectorAll方法获取的节点列表是固定的内容，
//      页面最开始有多少节点，就一直获取多少节点，不会根据具体情况更新列表内容和长度